<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="admin/_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <!-- 响应式-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.2.4/dist/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/me.css">
    <title>博客管理</title>
</head>
<body>
<!--导航-->
<nav th:replace="admin/_fragments :: menu(1)" class="ui inverted attached  segment m-padded-tb-mini stackable">
</nav>
<div class="ui attached menu">
    <div class="ui right aligned container">
        <div class="menu right">
            <a th:href="@{/admin/blog/input}" class="item">写博客</a>
            <a th:href="@{/admin/mblog}" class="item active">博客列表</a>
        </div>
    </div>
</div>
<!--中间部分-->
<div class=" m-container-small m-padded-tb-large">
    <div class="ui container">
        <div class="ui form secondary segment">
            <div class="inline fields">
                <input type="hidden" name="page">
                <div class="field">
                    <input type="text" name="title" placeholder="标题">
                </div>
                <div class="field">
                    <div class="ui type selection dropdown">
                        <input type="hidden" name="typeId">
                        <i class="dropdown icon"></i>
                        <div class="default text">类型</div>
                        <div class="menu">
                            <div th:each="type : ${types}" class="item" th:data-value="${type.id}"
                                 th:text="${type.name}">开发者手册
                            </div>
                        </div>
                    </div>
                    <button id="clear-btn" class="ui compact button clear">清空</button>
                </div>
                <div class="field">
                    <div class="ui checkbox">
                        <input type="checkbox" id="recommend" name="recommend">
                        <label for="recommend">推荐</label>
                    </div>
                </div>
                <div class="field">
                    <button type="button" id="search-btn" class="ui button red basic">
                        <i class="search red icon"></i>
                        搜索
                    </button>
                </div>

            </div>
        </div>
        <div id="table-container">
            <table class="ui table compact " th:fragments="blogList">
                <thead class="center aligned">
                <tr>
                    <th></th>
                    <th>标题</th>
                    <th>类型</th>
                    <th>推荐</th>
                    <th>状态</th>
                    <th>更新时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody class="center aligned">
                <tr th:each="blog,iterStat : ${page.content}">
                    <td th:text="${iterStat.count}">1</td>
                    <td th:text="${blog.title}">可以练习的清单</td>
                    <td th:text="${blog.type.name}">认知升级</td>
                    <td th:text="${blog.recommend ? '是' : '否'}">是</td>
                    <td th:text="${blog.published ? '发布' : '草稿'}">草稿</td>
                    <td th:text="${blog.updateTime}">2020-10-8 08:10:24</td>
                    <td><a th:href="@{/admin/blog/{id}/input(id=${blog.id})}" class="ui mini teal basic button">编辑</a>
                        <a th:href="@{/admin/blog/{id}/delete(id=${blog.id})}" class="ui mini red basic button">删除</a>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <th colspan="7">
                        <div class="ui left mini aligned pagination menu" th:if="${page.totalPages>1}">
                            <a onclick="page(this)" th:attr="data-page=${page.number}-1" th:unless="${page.first}"
                                class="item  dividePage">上一页</a>
                            <a onclick="page(this)" th:attr="data-page=${page.number}+1" th:unless="${page.last}"
                                class="item dividePage">下一页</a>
                        </div>
                        <a th:href="@{/admin/blog/input}"
                           class="teal ui button basic right floated m-margin-right">
                            新增
                        </a>
                    </th>

                </tr>
                </tfoot>
            </table>
            <div class="ui success message" th:unless="${#strings.isEmpty(message)}">
                <i class="close icon"></i>
                <div class="header">
                    提示：
                </div>
                <p th:text="${message}">恭喜，操作成功！</p>
            </div>
        </div>
    </div>
</div>

<!--尾部-->
<footer th:replace="admin/_fragments :: footer"></footer>

<!--/*/<th:block th:replace="admin/_fragments :: script">/*/-->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<!--/*/</th:block>/*/-->
<script>
    $('.menu.toggle').click(
        function () {
            $('.m-item').toggleClass('m-mobile-hide');
        }
    )
    $('.ui.dropdown').dropdown({
        on: 'hover'
    })

    $("#clear-btn").on('click', function () {
        $('.ui.type.selection').dropdown('clear');
    })

    /*消息关闭初始化*/
    $('.message .close').on('click', function () {
        $(this).closest('.message')
            .transition('fade')

    })

    function page(obj) {
        $("[name='page']").val($(obj).data('page'));
        loadData();
    }

    function loadData() {
        $("#table-container").load("/admin/blog/search", {
            title: $("[name='title']").val(),
            typeId: $("[name='typeId']").val(),
            recommend: $("[name='recommend']").prop('checked'),
            page: $("[name='page']").val()
        });
    }

    $("#search-btn").click(function () {
        $("[name='page']").val(0);
        loadData()
    })
</script>
</body>
</html>